<template>
    <el-card class="h-camera-information-card">
        <template #header>
            <span>{{ website.aside.deviceTitle }}</span>
        </template>
        <div>
            <template v-for="(item, index) in streamArr">
                <el-collapse v-model="activeNames" @change="handleChange" accordion
                    :style="`width:${cardInfo.collapse.width}`">
                    <el-collapse-item :title="item.key" :name="item.key">
                        <HCameraDescription :data="getDescData(item)"></HCameraDescription>
                    </el-collapse-item>
                </el-collapse>
            </template>
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { reactive, ref, watch, computed, inject } from 'vue';
import { useStore } from 'vuex';
import HCameraDescription from './HCameraDescription.vue'
import { IStreamControlState } from '@/store/models/Home/Aside/StreamControl/types'
import { formattObjectToString } from '@/utils/core'
import { IWebsite } from '@/store/types';
const store = useStore()
const cardInfo = reactive({
    title: '设备信息',
    collapse: {
        width: '100%'
    }
})
const deivces = [
    {
        title: '设备1',
        value: 'haha'
    }
]
const website = inject('website') as IWebsite
const component = computed(() => store.state.home.frontAside.deviceInfo.component);
const streams = computed(() => store.state.home.frontAside.streamControl.streamState as IStreamControlState['streamState'])
const streamArr = computed(() => Array.from(streams.value, ([key, value]) => ({ key, value })))

const getDescData = ({ key, value }) => {
    return [
        {
            key: component.value.descFolder['pos'],
            value: value.pos ? formattObjectToString(value.pos, '<br>') :
                formattObjectToString({ x: '未知', y: '未知', z: '未知' }, '<br>')
        },
        {
            key: component.value.descFolder['status'],
            value: value.status || false
        },
        {
            key: component.value.descFolder['wsPort'],
            value: value.wsPort || '未知'
        },
    ]
}
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

</script>